<template>
	<div id="contextmenu" class="contextmenu" v-show="visible">
		<div class="contextmenu__item" @click="saveOrRemoveNotInvolveDocument">
			<span v-if="isInvolve.result">涉及</span>
			<span v-else>不涉及</span>
		</div>
	</div>
</template>

<script>
	let that
	export default {
		name: "index",
		data() {
			return {
				selectItem: '',
				visible: false,
				isInvolve: {
					result: false,
				},
				params: {
					itemId: ''
				},
			}
		},

		mounted() {
			that = this
			that.params.itemId = that.getQueryString("itemId")
		},
		methods: {
			init(event, item) {
				this.visible = true
				this.selectItem = item
				// 设置菜单出现的位置
				// 具体显示位置根据自己需求进行调节
				let menu = document.querySelector('#contextmenu')
				let cha = document.body.clientHeight - event.clientY
				console.log(document.body.clientHeight, event.clientY, cha)
				// 防止菜单太靠底，根据可视高度调整菜单出现位置
				menu.style.top = event.clientY - 80 + 'px'
				menu.style.left = event.clientX + 80 + 'px'
				document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法

				that.isDocumentNotInvolve()

			},
			foo() {
				this.visible = false
				this.$emit('foo')
			},


			saveOrRemoveNotInvolveDocument() {
				that.ajax({
					url: '/document/saveOrRemoveNotInvolveDocument',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						itemId: that.params.itemId,
					},
					success: function(result) {
						that.isInvolve.result = !that.isInvolve.result
						that.$emit("saveInvolve", that.isInvolve.result)
					}
				})
			},

			isDocumentNotInvolve() {
				that.ajax({
					url: '/document/isDocumentNotInvolve',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						itemId: that.params.itemId,
					},
					success: function(result) {
						that.isInvolve.result = result.data
					}
				})
			},

		}
	}
</script>

<style scoped>
	.contextmenu__item {
		display: block;
		line-height: 34px;
		text-align: center;
	}

	.contextmenu__item:not(:last-child) {
		border-bottom: 1px solid rgba(58, 62, 244, .2);
	}

	.contextmenu {
		position: absolute;
		background-color: #ecf5ff;
		width: 100px;
		/*height: 106px;*/
		font-size: 12px;
		color: #3A3EF4;
		border-radius: 4px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px solid rgba(58, 62, 244, .2);
		white-space: nowrap;
		z-index: 1000;
	}

	.contextmenu__item:hover {
		cursor: pointer;
		background: #66b1ff;
		border-color: #66b1ff;
		color: #fff;
	}
</style>